<template>
    <div>
        <div class="
        al-flex-container-center-v
        al-bg-color-white
        al-flex-container">
            <el-avatar :size="60"
                       :src="avatar"
                       class="al-cursor-pointer"
                       @error="errorHandler">
                <ALImage src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
            </el-avatar>

            <div class="al-d-il-blk al-m-left-20px">
                <div class="">{{nickname}}</div>
                <div class="" v-if="desc == 0">
                    <span class="el-icon-user al-text-color-light-green"></span>
                    <span > 管理员</span>
                </div>
                <div class="" v-else-if="desc == 1">
                    <span class="el-icon-user al-text-color-light-blue"></span>
                    <span > 摄影师</span>
                </div>
                <div class="" v-else-if="desc == 2">
                    <span class="el-icon-user al-text-color-light-pink"></span>
                    <span > 模特</span>
                </div>
                <div class="" v-else-if="desc == 3">
                    <span class="el-icon-user"></span>
                    <span > 普通用户</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import ALImage from "@/components/public/ALImage";
    export default {
        name: "AvatarNickname",
        components: {ALImage},
        props:{
            avatar:String,
            nickname: String,
            desc: Number

        },
        data () {
            return {
                // nickname:this.nickname,
                // desc:this.desc
            }
        },

        methods: {
            errorHandler() {
                return true
            },

            goPage(path){
                this.gotoPage(path);
            }
        },

    }
</script>

<style scoped>

</style>
